<template>
  <view class="container">
    <!-- 顶部信息 -->
    <view class="header">
      <u-image
        width="80px"
        height="80px"
        :src="userInfo.avatar"
        border-radius="50%"
      ></u-image>
      <text class="nickname u-font-28">{{ userInfo.nickname }}</text>
    </view>
    <!-- 主体内容 -->
    <view class="main-content">
      <u-cell-group title="设置">
        <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
        <u-cell-item
          v-if="userInfo.username === 'admin'"
          icon="integral-fill"
          title="所有页面"
          @tap="targetPage"
        ></u-cell-item>
      </u-cell-group>
    </view>
    <!-- 底部退出登录按钮 -->
    <view class="logout-btn">
      <u-button type="primary" @click="logout">退出登录</u-button>
    </view>
  </view>
</template>

<script setup>
uni.vk.pubfn.checkLogin();
const userInfo = uni.vk.getVuex("$user.userInfo");
const logout = async () => {
  vk.userCenter.logout({
    success: () => {
      vk.setVuex("baseData.classificationData", []);
      vk.navigateToLogin();
    },
  });
};
const targetPage = () => {
  uni.vk.navigateTo("/subPages/development/development");
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-bottom) - var(--window-top));
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background-color: $u-type-primary;
}

.nickname {
  color: #fff;
  margin-top: 20px;
}

.main-content {
  flex: 1;
}

.logout-btn {
  padding: 10px;
  text-align: center;

  button {
    font-size: 14px;
  }
}
</style>
